<template>
  <div>
    <div class="card-wrap flex-column justify-end card-padding">
      <div class="card-title-wrap">
        <span>{{ form.carSourceTypeStr == '现有' ? "车辆信息" : "车型信息" }}</span>
        <span></span>
      </div>
      <table-page :dataList="form.orderPlanList" border :total="total">
        <!-- 车辆 -->
        <template slot="tableCol" v-if="form.carSourceTypeStr == '现有'">
          <el-table-column label="车系" align="center" prop="carSeriesName" />
          <el-table-column label="车牌号" align="center" prop="carPlateNo" />
          <el-table-column label="车架号" align="center" prop="carVinNo" />
          <el-table-column label="车辆状态" align="center" prop="carStatusStr" />
          <el-table-column label="交车时间" align="center" prop="deliveryTime" />
          <el-table-column label="交车工作人员" align="center" prop="deliveryUserName" />
          <el-table-column label="保险" align="center" prop="carStatusStr" />
          <el-table-column label="年检" align="center" prop="carStatusStr" />
          <el-table-column label="所属城市" align="center" prop="carLicenseCityVal" />
          <el-table-column label="当前里程/km" align="center" prop="carMileage" />
          <el-table-column label="合同保证金(台)" align="center" prop="contractCashdeposit">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.contractCashdeposit) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="违章保证金(台)" align="center" prop="violationCashdeposit">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.violationCashdeposit) }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- 车型 -->
        <template slot="tableCol" v-else>
          <el-table-column label="品牌" align="center" prop="carBrandName" />
          <el-table-column label="车系" align="center" prop="carSeriesName" />
          <el-table-column label="车型" align="center" prop="carModelName" min-width="100px" show-overflow-tooltip />
          <el-table-column label="能源类型" align="center" prop="carPowerTypeStr" />
          <el-table-column label="颜色" align="center" prop="appearanceColor" />
          <el-table-column label="每期租金(元)" align="center" prop="planRent" min-width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.planRent) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="租期(月)" align="center" prop="planTenancyTypeStr" />
          <el-table-column label="加装费(元)" align="center" prop="attachedDecorationAmount">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.attachedDecorationAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="其他费用" align="center" prop="otherFeeAmount">
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.otherFeeAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="登记性质" align="center" prop="operationTypeStr" />
          <el-table-column label="合同保证金(台)" align="center" prop="contractCashdeposit" min-width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.contractCashdeposit) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="违章保证金(台)" align="center" prop="violationCashdeposit" min-width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.violationCashdeposit) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="批过数量" align="center" prop="quantityApproved" />
          <el-table-column label="未下单数量" align="center" prop="quantitySurplus" /> -->
          <el-table-column label="下单数量" align="center" prop="quantityOrder" />
        </template>
      </table-page>
      <div style="margin-top: 20px;display: flex;justify-content: start; align-items: center;flex-wrap: wrap;">
        <div style="min-width: 300px;">
          <span style="font-size: 14px; color: #606266">合同保证金:</span>
          <span style="margin-left: 10px">{{ format_thousand(form.contractCashdeposit) }}</span>
        </div>
        <div style="min-width: 300px;">
          <span style="font-size: 14px; color: #606266">违章保证金:</span>
          <span style="margin-left: 10px">{{ format_thousand(form.violationCashdeposit) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "cartMessageFlow",
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    return {
      total: 0,
    };
  },
  created() {
    console.log(this.form.orderPlanList, 'form.orderPlanList');
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
